import { WebGLCanvas } from "@nirvana/canvas";
import * as core from "@nirvana/core";
import { Color, Vector3 } from "@nirvana/math";
import { Shader } from "@nirvana/shaders";

const {
  AmbientLight,
  Camera,
  Data,
  DataElement,
  Entity,
  Geometry,
  Mesh,
  PointLight,
  ShaderMaterial,
  Engine,
  TextureUtil
} = core;

console.log(core);

async function main() {
  let canvas: HTMLCanvasElement = document.getElementById("engine-nirvana") as HTMLCanvasElement;
  const webCanvas = new WebGLCanvas(canvas);

  const engine = webCanvas.engine;

  const scene = engine.sceneManager.createScene("root");
  const camera = new Camera(engine);
  scene.addCamera(camera);
  camera.transform.setPosition(new Vector3(0, 0, 20));
  const rootEntity = new Entity("root-entity");
  scene.addEntity(rootEntity);

  const ambLight = new AmbientLight("alight");
  ambLight.color = new Color(0.1, 0.1, 0.1, 1);
  const pLight = new PointLight("plight");
  pLight.position = new Vector3(0, 0, 20);
  pLight.color = new Color(1.0, 0.8, 0.8, 1.0);
  scene.addLight(ambLight);
  scene.addLight(pLight);

  // webCanvas.onClick = (e) => {
  //   // console.log(e);
  //   const rect = canvas?.getBoundingClientRect();
  //   // console.log(rect);
  // };

  const vs = `
  attribute vec4 POSITION;

  uniform mat4 u_localMat;
  uniform mat4 u_modelMat;
  uniform mat4 u_viewMat;
  uniform mat4 u_projMat;
  uniform mat4 u_MVMat;
  uniform mat4 u_MVPMat;
  uniform mat4 u_normalMat;
  uniform vec3 u_cameraPos;

  void main() {
    gl_Position =  u_projMat * u_viewMat * u_modelMat * POSITION;
    gl_PointSize = 10.0;
  }
  `;
  const fs = `
  void main() {
    gl_FragColor = vec4(1.0,1.0,1.0,1.0);
  }
  `;

  const shader = Shader.create("light-demo", vs, fs);
  const material = new ShaderMaterial("", shader);

  webCanvas._strokeMoveUpdate = (event) => {
    // console.log(e)
    const x = event.clientX;
    const y = event.clientY;

    // ray: 从相机发射一条射线，经过鼠标点击位置

    const nx = (event.clientX - webCanvas.left - webCanvas.width / 2) / (webCanvas.width / 2);
    const ny = (webCanvas.height / 2 - (event.clientY - webCanvas.top)) / (webCanvas.height / 2);
    const cameraPos = camera.transform.position;
    // const ret = camera.pickRay(nx, ny);
    // console.log(ret)

    const gem = new Geometry();
    gem.addData(new Data(new Float32Array([nx, ny, 10.5]), [new DataElement("POSITION", 3)]));
    const mesh = new Mesh(gem, material);
    mesh.setDrawMode("points");
    rootEntity.add(mesh);
  };

  const gl = engine.gl;
  const textures = TextureUtil.createTextures(
    gl,
    {
      test: {
        src: "/dev-static/textures/texture.png"
      },
      a: {
        target: gl.TEXTURE_CUBE_MAP,
        src: [
          "/dev-static/textures/texture.png",
          "/dev-static/textures/texture.png",
          "/dev-static/textures/texture.png",
          "/dev-static/textures/texture.png",
          "/dev-static/textures/texture.png",
          "/dev-static/textures/texture.png"
        ]
      },
      // A cubemap from 1 image (can be 1x6, 2x3, 3x2, 6x1)：1图立方盒纹理
      goldengate: {
        target: gl.TEXTURE_CUBE_MAP,
        src: "/dev-static/textures/goldengate.jpg"
      },
      goldengate2: {
        target: gl.TEXTURE_CUBE_MAP,
        src: "/dev-static/textures/a.png",
        size: 4,
        slices: [1, 0, 0, 1, 1, 1, 2, 1, 3, 1, 1, 2],
        cubeFaceOrder: [
          gl.TEXTURE_CUBE_MAP_POSITIVE_X,
          gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
          gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
          gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
          gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
          gl.TEXTURE_CUBE_MAP_NEGATIVE_Z
        ]
      },
      checker: {
        mag: gl.NEAREST,
        min: gl.LINEAR,
        src: [255, 255, 255, 255, 192, 192, 192, 255, 192, 192, 192, 255, 255, 255, 255, 255]
      }
    },
    () => {}
  );

  console.log(textures);

  const single = TextureUtil.createTexture(
    gl,
    {
      // mag: gl.NEAREST,
      // min: gl.LINEAR,
      // src: [255, 255, 255, 255, 192, 192, 192, 255, 192, 192, 192, 255, 255, 255, 255, 255]
      target: gl.TEXTURE_CUBE_MAP,
      src: "/dev-static/textures/a.png",
      size: 4,
      slices: [1, 0, 0, 1, 1, 1, 2, 1, 3, 1, 1, 2],
      cubeFaceOrder: [
        gl.TEXTURE_CUBE_MAP_POSITIVE_X,
        gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
        gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
        gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
        gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
        gl.TEXTURE_CUBE_MAP_NEGATIVE_Z
      ]
    },
    null
  );

  console.log(single);

  // const fbi = TextureUtil.createFramebufferInfo(gl);
  // console.log(fbi);
}

main();
